<template>
  <a-modal
      v-model:visible="visible"
      modal-class="modal-form"
      title-align="start"
      :title="title"
      :top="80"
      :width="500"
      :align-center="false"
      :draggable="true"
      :mask-closable="false"
      :unmount-on-close="true"
      :ok-button-props="{ disabled: loading }"
      :cancel-button-props="{ disabled: loading }"
      :on-before-ok="handlerOk"
      @close="handleClose"
  >
    <a-spin class="form-full" :loading="loading">
      <a-form
          ref="formRef"
          :model="formModel"
          label-align="right"
          :auto-label-width="true"
          :rules="formRules"
      >
        <!-- 字典名称 -->
        <a-form-item field="name" label="字典项名称">
          <a-input v-model="formModel.name" placeholder="请输入字典项名称" />
        </a-form-item>
        <!-- 字典值 -->
        <a-form-item field="code" label="字典项值">
          <a-input v-model="formModel.code" placeholder="请输入字典项值" />
        </a-form-item>
        <!-- 排序 -->
        <a-form-item label="排序">
          <a-input-number
              v-model="formModel.sort"
              :style="{ width: '320px' }"
              placeholder="请输入排序"
              mode="button"
          />
        </a-form-item>
        <!-- 备注 -->
        <a-form-item label="备注" field="note">
          <a-textarea v-model="formModel.note" placeholder="请输入备注" />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script setup lang="ts">
import useLoading from '@/hooks/loading';
import useVisible from '@/hooks/visible';
import { UpdateRequest, updateRows } from '@/api/system/dictData';
import { Message } from '@arco-design/web-vue';
import formRules from './types/form.rules';

const { visible, setVisible } = useVisible();
const { loading, setLoading } = useLoading();
const title = ref<string>();
const isAddHandle = ref<boolean>(true);
const defaultForm = (): UpdateRequest => {
  return {
    id: undefined,
    name: undefined,
    code: undefined,
    note: undefined,
    dict_id:undefined,
    sort: 50,
  };
};
const formRef = ref();
const formModel = ref<UpdateRequest>({});
const emits = defineEmits(['restart']);
const renderForm = (record: any) => {
  formModel.value = { ...record };
};
// 打开新增
const openAdd = (id: number) => {
  title.value = '添加字典项';
  isAddHandle.value = true;
  renderForm({ ...defaultForm() });
  formModel.value.dict_id=id
  setVisible(true);
};
// 打开修改
const openUpdate = (record: any) => {
  title.value = '修改字典项';
  isAddHandle.value = false;
  renderForm({ ...defaultForm(), ...record });
  setVisible(true);
};
defineExpose({ openAdd, openUpdate });

const handlerClear = () => {
  setLoading(false);
};
// 确定
const handlerOk = async () => {
  setLoading(true);
  try {
    // 验证参数
    const error = await formRef.value.validate();
    if (error) {
      return false;
    }
    //  修改
    await updateRows(formModel.value);
    Message.success('操作成功');

    emits('restart');
    // 清空
    handlerClear();
    return true;
  } catch (e) {
    return false;
  } finally {
    setLoading(false);
  }
};
// 关闭
const handleClose = () => {
  handlerClear();
};
</script>

<style scoped lang="less"></style>
